import { useNavigation } from '@react-navigation/native';
import { ScreenContent } from 'components/ScreenContent';
<% if (props.stylingPackage?.name === "unistyles") { %>
import { View } from 'react-native';
import { StyleSheet } from 'react-native-unistyles';
<% } else {%>
import { StyleSheet, View } from 'react-native';
<% } %>

<% if (props.internalizationPackage?.name === "i18next") { %>
  import { InternalizationExample } from 'components/InternalizationExample';
<% } %>

import { Button } from '../components/Button';

export default function Overview() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <ScreenContent path="screens/overview.tsx" title="Overview">
      <% if (props.internalizationPackage?.name === "i18next") { %>
        <InternalizationExample />
      <% } %>
      </ScreenContent>
      <Button
        onPress={() =>
          navigation.navigate('Details', {
            name: 'Dan',
          })
        }
        title="Show Details"
      />
    </View>
  );
}

<% if (props.stylingPackage?.name === "unistyles") { %>
export const styles = StyleSheet.create((theme, rt) => ({
    container: {
        flex: 1,
        padding: 24,
        backgroundColor: theme.colors.background,
        paddingBottom: rt.insets.bottom,
    },
}));
<% } else { %>
export const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
    },
});
<% } %>
